<template>
  <div class="login flex flex-col j-center a-center">
    <img src="~assets/images/logo.png" />
    <form
      @submit.prevent="formSubmit"
      class="login-form flex flex-col j-center a-center"
    >
      <div class="input-item">
        <mt-field
          label="账号"
          placeholder="请输入账号"
          v-model="form.username"
        ></mt-field>
      </div>
      <div class="input-item">
        <mt-field
          label="密码"
          placeholder="请输入密码"
          type="password"
          v-model="form.password"
        ></mt-field>
      </div>
      <mt-button type="primary" @click="loginIn">登录</mt-button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    loginIn() {
      this.$store.commit("loginIn");
      this.$router.replace({ path: "/home" });
    },
    formSubmit() {},
  },
};
</script>

<style scoped>
.login {
  min-height: calc(100vh - (var(--header-height) + var(--tabbar-height)));
  flex: 1;
  background: linear-gradient(-45deg, #718578, #8fd3f4, #548dbe, #00f2fe);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}
.login-form {
  margin: 30px 0;
  color: #fff;
  background-color: transparent;
  margin-left: 60px;
  margin-right: 60px;
}
.login-form /deep/ .mint-cell {
  background: none;
  /* border: 1px solid var(--gray2); */
}
.mint-cell /deep/ .mint-cell-value input {
  color: #fff;
}
.mint-cell /deep/ .mint-cell-value input::-webkit-input-placeholder {
  color: rgb(226, 226, 226);
  font-size: 14px;
}
.login-form /deep/ .input-item {
  box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
  background-color: rgb(124 154 160 / 30%);
  border-radius: 30px;
}
.login-form /deep/ .input-item ~ .input-item {
  margin-top: 20px;
}
.login-form /deep/ .mint-button {
  width: 80%;
  margin-top: 20px;
}
.mint-field /deep/ .mint-cell-title {
  text-align: center;
}
.mint-field /deep/ .mint-cell-title {
  width: 70px;
}

@keyframes gradientBG {
  50% {
    background-position: 100% 50%;
  }
  0,
  100% {
    background-position: 0% 50%;
  }
}
</style>